---
import { Image } from "astro:assets";
import { getEntry } from "astro:content";
import {markedLine} from "@/utils/markedUtil";
import BaseLayout from "@/layouts/BaseLayout.astro";

const homepage = await getEntry("homepage", "index");
const { banner} = homepage.data;
---

<BaseLayout>
	<!-- banner -->
	<section class="section pb-[50px]">
		<div class="container">
			<div class="row text-center">
				<div class="mx-auto lg:col-10">
					<h1 class="font-primary font-bold">{banner?.title}</h1>
					{
						banner?.content && (
							<p class="mt-4" set:html={markedLine(banner.content)} />
						)
					}

					{
						banner?.button?.enable && (
							<a class="btn btn-primary mt-4" href={banner.button.link}>
								{banner.button.label}
							</a>
						)
					}

					{
						banner?.image && (
							<Image
								class="mx-auto mt-12"
								src={banner?.image}
								width={750}
								height={390}
								alt="banner image"
							/>
						)
					}
				</div>
			</div>
		</div>
	</section>
</BaseLayout>
